<template>
    <hl-page title="收益提现" :hidden-tab-bar="true" :hidden-back="false">
        <div class="content" slot="content">
            <div class="form">
                <h2>阿玛迪斯--<span>收益提现</span></h2>
                <div class="form-cell">
                    <p>
                        <input placeholder="金额" v-model="money" step="0.01" min="0.01" type="number"/><span
                            class="unit">￥</span>
                    </p>
                </div>
                <p class="price">
                    可提现：￥{{parseFloat(user.money)-parseFloat(user.lock_money) > 0?parseFloat(user.money)-parseFloat(user.lock_money) :0}}
                </p>
                <p class="tips">
                    提现申请之后，将由工作人员进行审核
                </p>
                <cube-button @click="submit">立即提现</cube-button>
            </div>
        </div>
    </hl-page>
</template>

<script>
    import HlPage from "../components/hl-page";
    import {Url} from "../utils/config";


    export default {
        components: {HlPage},
        name: "buy",
        data() {
            return {
                money: ""
            }
        },
        mounted() {

        },
        computed: {
            user() {
                return this.$store.state.user
            }
        },
        methods: {

            submit() {

                if (this.money == 0) {

                    this.$createToast({
                        txt: "请输入提现金额",
                        type: 'warn',
                        time: 1500
                    }).show()
                    return false;
                }
                let params = {}
                params.money = this.money;
                let toast = this.$createToast({
                    txt: "正在申请",
                    time: 0
                })
                this.$post(Url.cashUrl, params).then((res) => {
                    toast.hide();
                    this.$createDialog({
                        type: 'alert',
                        title: '申请成功',
                        content: `您的提现申请已成功！`,
                        icon: 'cubeic-alert',
                        onConfirm: () => {
                            this.$router.push('/me')
                        }
                    }).show()
                }).catch((error) => {
                    toast.hide();
                    this.$createToast({
                        txt: error,
                        type: 'error',
                        time: 1500
                    }).show()
                })
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../assets/theme";

    .content {
        background: #f0f0f0;
        .form {
            margin: 64px;
            border-radius: 5px;
            background: #fff;
            box-sizing: border-box;
            box-shadow: #e0e0e0 2px 2px 2px;
            h2 {
                font-size: 32px;
                color: #444;
                font-weight: normal;
                padding: 64px 24px;
                text-align: center;
                margin-bottom: 32px;
                border-bottom: dashed 1PX #e0e0e0;
                span {
                    color: @app-color;
                }
            }
            .tips {
                font-size: 24px;
                color: #888888;
                text-align: center;
                padding: 32px 12px;

            }
            .price {
                font-size: 32px;
                color: @app-color;
                text-align: center;
                padding: 24px 0;
                border-bottom: dashed 1PX #e0e0e0;
            }
        }
        .form-cell {
            height: 60px;
            padding: 12px 0;
            margin: 0 12px;
            border-bottom: 1PX solid #ddd;
            display: flex;
            flex-direction: row;
            align-items: center;
            > p {
                height: 60px;
                margin-left: 40px;
                margin-right: 40px;
                display: flex;
                flex: 1;
                font-size: 14PX;
                justify-content: flex-start;
                align-items: center;
                .amds {
                    font-size: 48px;
                    color: #e64e4d;
                }
                input {
                    flex: 1;
                    border: none;
                    outline: none;
                    margin-left: 20px;
                }
            }
        }
    }
</style>